<%@page import="com.wframe.framework.util.UploadUtil"%>
<%@ page language="java"  pageEncoding="utf-8"%>
<%@taglib uri="/WEB-INF/page-base.tld" prefix="p"%>
<%
String conpath=request.getContextPath();
request.setAttribute("fileserver", UploadUtil.getConfig().getDownserver());
%>

<script type="text/javascript" src="<%=conpath %>/plugins/plupload2/plupload.full.min.js"></script>
<script type="text/javascript" src="<%=conpath %>/plugins/oss/upload.js"></script>
<style>
._comm_selimgul{margin:0px;pading:0px;}
._comm_selimgul li{float:left;margin:5px;list-style:none;position: relative;}
._comm_selimgul li img{width:100px;height:100px;border:0px;}
._comm_selimgul li a{border:1px solid #fff;display:inline-block;padding:1px}
._comm_selimgul li a:hover{border:1px solid #5BA7C6}
._comm_selimgul li a.cur{border:1px solid #5BA7C6}
._comm_selimgul li i{display:inline-block;position:absolute;right:4px;top:4px;width:16px;height:16px;background:#eeeeee url(<%=conpath%>/platform/images/cross.png)}
._comm_selimgul .progresstxt{width:100%;height:12px;line-height:12px;text-align:center;font-size:10px;color:red;position: absolute;bottom:4px;}
._comm_selimgul .progressbg{width:0;position:absolute;background:#00CD26;bottom:4px;height:12px;font-size:0px;}
		
</style>
<script>
 function selectimg_ok(imgpath){
 	var obj=new Object();
 	var form=$w.currWinForm();
 	obj.filePath="";
   	obj.fileName=imgpath;
   	$w.closeCurrWin(obj);
	 
 }
 function selectimg_ok2(imgpath){
	 	var obj=new Object();
	 	var form=$w.currWinForm();
	 	obj.filePath="";
	   	obj.fileName=imgpath.replace("${fileserver}","");
	   	$w.closeCurrWin(obj);
		 
	 }
</script>
<div style="margin:2px 10px;"><span style="float:right"><a href="javascript:;" class="easyui-linkbutton" iconCls="icon_save" id="_comm_selimgbtn">上传图片</a></span></div>
<div style="clear:both;font-size:0px;height:1px;"></div>
<script>
window.setTimeout(function(){
	var plparm={
		runtimes : 'html5,flash,silverlight,html4',
		browse_button :'_comm_selimgbtn',
		url : '',
		flash_swf_url : ctx+'/plugins/plupload2/Moxie.swf',
		silverlight_xap_url : ctx+'/plugins/plupload2/Moxie.xap',
		multi_selection:true,
		filters: {
			max_file_size : '1mb',
			prevent_duplicates :false, //不允许选取重复文件
		  	mime_types : [ //只允许上传图片文件
		    { title : "图片文件", extensions : "jpg,png" }
		  	]
		},init:{
			FilesAdded: function(up, files) {
				previewImageOne(files[0],function(imgsrc){
					var ul=$("#_comm_selimglist ._comm_selimgul");
					if(ul.children().length>0){
						ul.children().eq(0).before("<li id='img_"+files[0].id+"'><a href='javascript:;' ><img src='"+imgsrc+"'></a><div class='progressbg'></div><div class='progresstxt'>上传中</div></li>");
					}else ul.append("<li id='img_"+files[0].id+"'><a href='javascript:;' ><img src='"+imgsrc+"'></a><div class='progressbg'></div><div class='progresstxt'>上传中</div></li>");
					$("#_comm_selimgups").hide();
					$("#_comm_selimglist").show();
					up.start();
				})
				
			},UploadFile:function(up,file){
				var f=$('#img_'+file.id);
			},UploadProgress:function(up,file){
				var f=$('#img_'+file.id);
				var d=$(".progressbg",f);
				var w=f.width()*parseInt(file.percent)/100;
				d.css("width",w+"px");
				$(".progresstxt",f).html(file.percent+"%");
			},FileUploaded:function(up,file,responseObject){
				var re=jQuery.parseJSON(responseObject.response);
				$('#img_'+file.id).html('<a href="javascript:selectimg_ok2(\''+re.url+'\');" ><img src="'+re.url+'"></a><i title="删除图片" onclick="_comm_selimgdel2(\''+re.url+'\',this)"></i>')
			}
		}
	}
	$oss.setUpDir('<p:write bind="rootPath"/>');
	var uploader=$oss.initUpload(plparm);
	
}, 600);
function previewImageOne(file,callback){
	if(!file || !/image\//.test(file.type)) return;
	if(file.type=='image/gif'){
		var fr2 = new mOxie.FileReader();
		fr2.onload = function(){
			callback(fr2.result);
			fr2.destroy();
			fr2 = null;
		}
		fr2.readAsDataURL(file.getSource());
	}else{
		var preloader = new mOxie.Image();
		preloader.onload = function() {
			//preloader.downsize( 300, 300 );
			var imgsrc = preloader.type=='image/jpeg' ? preloader.getAsDataURL('image/jpeg',80) : preloader.getAsDataURL(); //得到图片src,实质为一个base64编码的数据
			callback && callback(imgsrc);
			preloader.destroy();
			preloader = null;
		};
		preloader.load( file.getSource() );
	}
}
function _comm_selimgdel(url,obj){
	window.parent.$w.confirmMsg("确定删除？", function(r){
		if(r){
			var form=$w.currWinForm();
			$w.doUrl(ctx+"/platform/upload/UploadPage@delUpFile.page?fileName="+url+"&rootPath="+$("input[name='rootPath']",form).val(),{},function(re){
				if(re.state=='ok'){
					$(obj).parent().remove();
				}
			})
		}
	})
}
function _comm_selimgdel2(url,obj){
	window.parent.$w.confirmMsg("确定删除？", function(r){
		if(r){
			var form=$w.currWinForm();
			$w.doUrl(ctx+"/platform/upload/UploadPage@delUpFile.page?fileName="+url+"&rootPath="+$("input[name='rootPath']",form).val(),{},function(re){
				if(re.state=='ok'){
					$(obj).parent().remove();
				}
			})
		}
	})
}
</script>
<div id="_comm_selimglist">
<form method="post" action="/platform/upload/UploadPage@upload.page"  enctype="multipart/form-data">
	<p:hidden bind="type"/>
    <p:hidden bind="rootPath"/>
    <p:hidden bind="actions"/>
    <p:hidden bind="tag"/>
    <p:define id="selfname" bind="fileName"/>
    <ul class="_comm_selimgul" style="margin:0px;padding:0px;">
    <p:iterate bind="fileList" id="info">
    <p:define id="fname" bind="#info" type="java.lang.String"/>
   	 <li><a href="javascript:selectimg_ok('<%=fname %>');" <%if(selfname!=null && selfname.toString().indexOf(fname)!=-1){%>class="cur"<%} %>><img src="${fileserver}<%=fname %>"></a><i title="删除图片" onclick="_comm_selimgdel('<%=fname %>',this)"></i></li>
    </p:iterate>
    </ul>
    <div style="clear:both;font-size:0px;height:1px;"></div>
</form>
</div>
<div id="_comm_selimgups" style="display:none;padding:10px;">

</div>
